<template>
	<div class="container">
		<v-toolBar :fullPath="postData.opera" :tableColumns="tableColumns" @changeLie="getChangeLie"
			@getSearchIPArr="getToolBarSearchIPArr" @getSearchIP="getToolBarSearchIP">
		</v-toolBar>
		<el-table v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading"
			:data="tableDataFn" stripe border style="width: 100%">
			<el-table-column type="index" width="50" label="序号">
			</el-table-column>
			<template v-for="item in tableColumns">
				<el-table-column :prop="item.prop" :label="item.label" :sortable="item.sortable" :width="item.width"
					align="center" v-if="item.isShow" :key="item.prop">
				</el-table-column>
			</template>
		</el-table>
		<v-pagination :dataTotal="postData.dataTotal" :curPage="postData.curPage" :pageSize="postData.pageSize"
			@getCurPage="getPaginationCurPage" @getPageSize="getPaginationPageSize">
		</v-pagination>
	</div>
</template>

<script>
	import {
		getSqlserverIoDetail
	} from "@/api/index.js";
	import vPagination from "../../../../common/Pagination.vue";
	import vToolBar from "../../../../common/monitorInfoToolBar/Toolbar.vue";
	import tableColumns from "./DbConnectTableColumns.js";
	import bus from "common/bus.js";
	import {
		mapMutations
	} from 'vuex'
	//IO详情
	export default {
		components: {
			vPagination,
			vToolBar,
		},
		data() {
			return {
				postData: {
					opera: "dbConnect",
					curPage: 1,
					pageSize: 20,
					dataTotal: 0,
				},
				tableData: [],

				tableColumns: tableColumns,
				SearchIPArr: [],
				searchJson: {},
				SearchIP: "",
				timerName: "MonitorInfoDataBaseSQLServerConnect",
				timerEventName: "timerMonitorInfoDataBaseSQLServerConnect",
				timerInterval: 1000 * 60,
				loading: true,
				Ioitem: {

					instance: '',
					ip: ''
				},
			};
		},
		created() {
			this.getTableData();

			bus.$emit("timerNewTodo", {
				name: this.timerName,
				eventName: this.timerEventName,
				interval: this.timerInterval,
				intervalNow: 0,
			});

			bus.$on(this.timerEventName, (msg) => {
				if (msg.isGetData) {
					this.getTableData('n');
				}
			});
		},
		computed: {
			postDataFn() {
				return {
					postData: JSON.stringify(this.postData),
				};
			},
			tableDataFn() {
				return this.tableData.filter((item) => {
					item.dbname = item.instance
					item.writedata = item.writedata

					return item;

				});
			},
		},
		methods: {
			...mapMutations({
				getPagination: 'SqlServerIoInfo/pagination'
			}),
			getTableData(data) {
				if (!data) {
					this.loading = true;
				}
				this.tableData = []

				getSqlserverIoDetail().then((res) => {
					// 处理后台返回的数据  无奈
					let itemKey = Object.keys(res)
					let itemValue = Object.values(res)
					let itemBox = []
					// console.log(itemKey,itemValue)

					itemKey.forEach((item, index) => {
						let itemIp = item.split(',')[0].split('[')[1]
						let iteminstance = item.split(',')[1].split(']')[0];

						if (itemValue[index].length > 0) {
							itemValue[index][0]['ip'] = itemIp
							itemValue[index][0]['instance'] = iteminstance
							itemBox.push(...itemValue[index])

						} else {

							this.Ioitem.ip = itemIp
							this.Ioitem.instance = iteminstance
							itemBox.push(this.Ioitem)



						}


					})

					this.postData.dataTotal = itemBox.length
					this.$store.commit('SqlServerIoInfo/setItem', itemBox)
					// this.$store.commit("SqlServerIoInfo/pagination",this.postData );
					this.getPagination(this.postData)
					this.tableData = this.$store.getters["SqlServerIoInfo/getItem"]


					// this.dataTotal = this.tableData.length;
					// this.tableData = res.data;

					this.loading = false;
				});
			},
			getPaginationCurPage(val) {
				this.postData.curPage = val;
				this.getTableData();
			},
			getPaginationPageSize(val) {
				// 分页大小改变之后，重置当前页码为 1
				this.postData.curPage = 1;
				this.postData.pageSize = val;

				this.getTableData();
			},
			getToolBarSearchIPArr(arr) {
				// 获取搜索IP关键字
				this.SearchIPArr = arr;

				this.postData.curPage = 1;
				if (this.SearchIPArr.length > 0) {
					this.postData.filters = {
						ip: this.SearchIPArr,
					};
				} else {
					this.postData.filters = {};
				}

				this.getTableData();
			},
			async getToolBarSearchIP(str) {
				// 获取搜索IP关键字
				this.SearchIP = str;
				this.postData.curPage = 1;
				// this.postData.filters = {
				//   ip: this.SearchIP,
				// };
				// this.getTableData();
				await this.$store.commit("SqlServerIoInfo/SearchItem", this.SearchIP);
				// await this.$store.commit("SqlServerIoInfo/pagination",this.postData );
				this.getPagination(this.postData)
				this.tableData = await this.$store.getters["SqlServerIoInfo/getSearchItem"]
				this.postData.dataTotal = this.tableData.length
			},
			getChangeLie(val) {
				// 遍历表格列
				this.tableColumns.map((item, index) => {
					// 列的显示隐藏状态改变
					item.isShow = val.includes(item.label);
				});
			},
		},
		watch: {},
		beforeDestroy() {
			// 页面关闭前，移除定时器任务
			bus.$emit("timerNewTodo", {
				name: this.timerName,
			});
		},
	};
</script>

<style scoped>
	.el-table .warning-row {
		background: oldlace;
	}

	.el-table .success-row {
		background: #f0f9eb;
	}
</style>